<template>
	<div id="project_box">
		<div id="container">
			<div class="mui-scroll">
				<image src="https://yo.docshare.org.cn/static/images/wx.png" @click="toggle1" style="position: absolute;width: 25px;height: 25px;top: 20px;right: 20px;z-index: 999;"></image>
				<image src="https://yo.docshare.org.cn/static/images/dw.png" @click="toggle3" style="position: absolute;width: 25px;height: 25px;top: 50px;right: 20px;z-index: 999;"></image>
				<image src="https://yo.docshare.org.cn/static/images/dk.png" @click="toggle2" style="position: absolute;width: 25px;height: 25px;top: 80px;right: 20px;z-index: 999;"></image>
			</div>
		</div>
		<map id="container" :style="{
			width : `${innerWidth}px`,
			height : `${innerHeight}px`,
		}" :latitude="latitude" :longitude="longitude" :markers="getMarks" :enableSatellite="isSite">
		</map>
		<!-- <image src="https://yo.docshare.org.cn/static/images/read.png" mode="heightFix" style="z-index: 999;width: 50px;height: 50px;position: absolute;right: 10px;
		top: 100px;"></image> -->
		 <div class="mui-bar mui-bar-tab" style="width: 100%;display:flex;justify-content: center;align-items: center;top: 10px;">
			<button   @click="addMark" id="shift" style="width: 45%;height:40px;border-radius: 50px;bottom:57px;background-color: #c1ebd7;margin-left: 5px;margin-top: 5px;opacity: 0.9;display:flex;justify-content: center;align-items: center;">打卡</button>
			<button  @click="queryRoute" style="width: 45%;height:40px;border-radius: 50px;bottom:57px;background-color: #c1ebd7;margin-left: 16px;margin-top: 5px;opacity: 0.9;display:flex;justify-content: center;align-items: center;">路线查询</button>
		 </div>
		<div id="footer">
			<div class="first">
				<ul class="am-avg-sm-2">
					<li>
						<a title="" @click="uni.navigateTo({
							url:'../main/index'
						})">
							<img src="https://yo.docshare.org.cn/static/images/icon-footer1-a.png" />
							<p>首页</p>
						</a>
					</li>
					<li>
						<a title=""  @click="uni.navigateTo({
							url:'../../pageA/pages/active/trip_list'
						})">
							<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer4-a.png" />
							<p>活动</p>
						</a>
					</li>
				</ul>
			</div>
			<div class="beautiful">
				<a title=""  @click="uni.navigateTo({
					url:'../add/my_note'
				})">
					<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer3-a.png" />
				</a>
			</div>
			<div class="last">
				<ul class="am-avg-sm-2">
					<li class="active">
						<a title=""  @click="uni.navigateTo({
							url:'map'
						})">
							<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer02-a.png" />
							<p>地图</p>
						</a>
					</li>
					<li>
						<a title=""  @click="uni.navigateTo({
							url:'../../pageB/pages/user/user_center'
						})">
							<img alt="" src="https://yo.docshare.org.cn/static/images/icon-footer5-a.png" />
							<p>我的</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/config'
	import QQMapWX from '@/common/js/qqmap-wx-jssdk.js';
	const plugin = requirePlugin('routePlan');
	export default {
		data() {
			return {
				uni,
				isSite:false,
				isSetMark:true,
				config,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				plugin,
				curMark:null,
				checkMarks:[],
				latitude: 39.90923,
				longitude: 116.397428,
				referer: 'yo',
				key: 'WI2BZ-7V3CD-DUS4L-PZP2K-XE7QV-AJBCR',
				qqmapsdk: '',
				active: '',
				scale: 13,
				markers:[],
				innerWidth: uni.getSystemInfoSync().windowWidth,
				innerHeight: uni.getSystemInfoSync().windowHeight,
			}
		},
		computed:{
			getMarks(){
				if(this.isSetMark){
					return  this.checkMarks.concat([this.curMark]);
				} else {
					return  [this.curMark];
				}
			},
		},
		methods: {
			
			toggle3(){
				var that = this;
				uni.getLocation({
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				})	
				
			},
			toggle2(){
				this.isSetMark =! this.isSetMark;
			},
			toggle1(){
				this.isSite =! this.isSite;
			},
			addMark(){
				var latitude = this.latitude;
				var longitude = this.longitude;
				uni.request({
					url: `${config.baseUrl}/getmark?token=${uni.getStorageSync('token')}`,
					method: 'POST',
					data: {
						latitude:latitude,
						longitude:longitude
					},
					success(r) {
						if (r.data.succ) {
							
						} else {
							
						}
					},
					complete(res) {
						if (res.data && res.data.msg) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					},
				})
			},
			queryRoute(){
				let endPoint = JSON.stringify({ //终点
					'name': '北京西站',
					'latitude': 39.894806,
					'longitude': 116.321592
				});
				uni.navigateTo({
					url: 'plugin://routePlan/index?key=' + this.key + '&referer=' + this.referer + '&endPoint=' + endPoint +
						'&navigation=1'
				})
			},
			listenerBtnGetLocation: function() {
				// 实例化腾讯地图API核心类
				var qqmapsdk;
				qqmapsdk = new QQMapWX({
					key: 'LTLBZ-OGFK5-EQXIR-QDEDQ-ZQJR7-UJBVB' // 必填
				});
				var that = this
				var regionWX = [];
				wx.getLocation({
					type: 'wgs84',
					success: function(res) {
						//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
						qqmapsdk.reverseGeocoder({
							success: function(res) {
								that.province = res.result.address_component.province;
								that.city = res.result.address_component.city;
								that.district = res.result.address_component.district;
								that.getServerData();
							},
							fail: function(res) {
								console.log(res);
								that.getServerData();
							},
							complete: function(res) {
								console.log(res);
							}
						})

					},
					fail: function(err) {
						that.setData({
							region: ['广东省', '广州市', '海珠区']
						})
						console.log(err)
					},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
				})
			},
			showPop() {

			},
			searchNearby(keyword) {
				let location = this.latitude + ',' + this.longitude;
				let that = this;
				that.active = keyword;
				// 调用接口
				that.qqmapsdk.search({
					keyword: keyword, //搜索关键词
					success: function(res) {
						const mks = [];
						for (var i = 0; i < res.data.length; i++) {
							mks.push({
								width: 20,
								height: 35,
								iconPath: '/static/icon/mapIcon.png',
								title: res.data[i].title,
								id: res.data[i].id,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
								callout: {
									content: res.data[i].title,
									fontSize: 12,
									borderRadius: 5,
									padding: 5,
									display: 'ALWAYS',
								},
							});
						}
						that.setMarkers(mks);
					},
					fail: function(res) {
						console.log(res);
					},
					complete(res){
						if(res.data && res.data.msg){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					},
				});
			},
			//搜索
			setMarkers(marks) {
				let that = this;
				that.markers = marks;
				that.$forceUpdate();
			},

		},
		created() {
			var that = this;
			uni.onWindowResize((res) => {
				that.innerWidth = res.size.windowWidth;
				that.innerHeight = res.size.windowHeight;
				const query = uni.createSelectorQuery().in(this);
				query.select('#footer').boundingClientRect(data => {
					that.innerHeight = data.top
				}).exec();
			})
		},
		onLoad(option) {
			var that = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#footer').boundingClientRect(data => {
				that.innerHeight = data.top
			}).exec();
			this.qqmapsdk = new QQMapWX({
				key: this.key, //申请的key
			});
			uni.showLoading({
				title: '加载中',
			});
			this.refresh = setInterval(function(){
				uni.getLocation({
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						// uni.hideLoading();
						// that.markers.push(res)
					}
				})	
			},3000)
			uni.getLocation({
				success(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					uni.hideLoading();
					// res.iconPath =  'https://yo.docshare.org.cn/static/images/mk.png';
					that.curMark = res;
					// that.markers.push(res)
				}
			})	
					uni.request({
						url: `${config.baseUrl}/backmark?token=` + uni.getStorageSync('token'),
						method: 'GET',
						success(r) {
							if (r.data.succ) {
								
								that.checkMarks = r.data.data.map(function(item){
									var i = item;
									i.iconPath = 'https://yo.docshare.org.cn/static/images/mk.png';
									return i;
								});
								// that.markers = that.markers.concat(r.data.data)
								
							}
						},
							complete(res){
								if(res.data && res.data.msg){
									uni.showToast({
										icon:'none',
										title:res.data.msg
									})
								}
							},
					});
		},
		destroyed() {
			clearInterval(this.refresh);
		}
		
	}
</script>
<style scoped>
	html,
	body,
	#project_box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	#container {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	.btn {
		margin: 0 5px;
	}

	a {
		text-decoration: none;
		color: darkseagreen;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	a:active {
		color: #fefe78;
	}

	.amap-icon img,
	.amap-marker-content img {
		width: 25px;
		height: 34px;
	}

	.marker {
		position: absolute;
		top: -20px;
		right: -118px;
		color: #fff;
		padding: 4px 10px;
		box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
		white-space: nowrap;
		font-size: 12px;
		font-family: "";
		background-color: #25A5F7;
		border-radius: 3px;
	}

	.custom-content-marker {
		position: relative;
		width: 25px;
		height: 34px;
	}

	.custom-content-marker img {
		width: 100%;
		height: 100%;
	}

	.custom-content-marker .close-btn {
		position: absolute;
		top: -6px;
		right: -8px;
		width: 15px;
		height: 15px;
		font-size: 12px;
		background: #ccc;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 15px;
		box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
	}

	.custom-content-marker .close-btn:hover {
		background: #666;
	}

	.custom-input-card {
		width: 22rem;
	}

	.custom-input-card .btn {
		margin-right: 1rem;
	}

	.custom-input-card .btn:last-child {
		margin-right: 0;
	}

	.info-title {
		color: white;
		font-size: 14px;
		background-color: #25A5F7;
		line-height: 26px;
		padding: 0px 0 0 6px;
		font-weight: lighter;
		letter-spacing: 1px
	}

	.info-content {
		font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
		padding: 4px;
		color: #666666;
		line-height: 23px;
	}

	.info-content img {
		float: left;
		margin: 3px;
	}

	.amap-info-combo .keyword-input {
		height: 25px;
		border-radius: 2px 0 0 2px;
	}
</style>
